<template>
    <div class="newsinfo-container">
        <h3 class="title">{{newsdata.title}}</h3>
        <p class="info">
            <span>发表时间：{{newsdata.add_time | dateFormat}}</span>
            <span>点击了{{newsdata.click}}次</span>
        </p>
        <hr>
        <div class="content" v-html="newsdata.content">
        </div>
         <!-- 放置子组件
         父组件向子组件通过属性绑定的方式传值 -->
        <comment :id="id"></comment>
    </div>
</template>

<script>
//导入组件
import comment from '../sub-compoents/Comment.vue'

export default {
    data() {
        return {
            newsdata:{}
        }
    },
    methods:{
        async getNewsData(){
            const {data} = await this.$http.get('/api/getnew/'+this.id);
            if(data.status===0) this.newsdata=data.message[0]
        }
    },
    props:['id'],
    created(){
        this.getNewsData()
    },
    components:{
        //注册私有组件
        comment
    }
}
</script>

<style lang="scss" scopend>
    .newsinfo-container{
        padding:0 8px;
    }
    .title{
        font-size: 15px;
        text-align: center;
        color: red;
        margin: 15px;
    }
    .info{
        color:blue;
        display: flex;
        justify-content: space-between;
    }
</style>